<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>状态分发</title>
</head>

<body>
    <h1>状态分发</h1>
    <ol>
        <li>使用props，将父组件state中的数据传递给子组件。</li>
        <li>父组件使用setState触发渲染线程之后，子组件使用了状态数据，也会被重新渲染</li>
    </ol>
    <div id="app"></div>

    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
    <script type="text/babel">

        // 父组件
        class MyParent extends React.Component {

            constructor() {
                super();
                // 初始化状态
                this.state = {
                    name: "王珂",
                    work: "兽医",
                }
            }

            handleOk() {
                const name = this.refs.nameInput.value;
                const work = this.refs.workInput.value;
                console.log("name = ",name);
                console.log("work = ",work);
                this.setState({name,work});
            }

            render() {
                return (
                    <div>
                        <h3>父组件</h3>
                        <div>
								姓名：<input type="text" ref="nameInput" />
								工作：<input type="text" ref="workInput" />
								<button onClick={()=>{this.handleOk()}}>确认</button>
							</div>
                        <h3>子组件</h3>
                        <MySub title={this.state.name} work={this.state.work}/>
                    </div>
                )
            }
        }

        // 子组件
        class MySub extends React.Component {


            constructor(props) {
                super(props);
            }
            render() {
                return (
                    <p>{this.props.title}:{this.props.work}</p>
                )
            }

        }


        const app = document.querySelector("#app");
        const root = ReactDOM.createRoot(app);

        root.render(<MyParent/>);
    </script>
</body>

</html>